<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>会员注册</title>
    <!-- Bootstrap -->
    <link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--注册-->
<div class="container" >
    <div id="errorDiv" class="bg-info"></div>
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal" >

                <div class="form-group">
                    <label  class="col-sm-2 control-label">会员名:</label>
                    <div class="col-sm-4">
                        <input type="text" name="memberName" class="form-control" id="memberName" placeholder="请输入会员名" onblur="cheCkMemberName(this.value)">
                    </div>
                    <div id="memberNameTip"></div>
                </div>

                <div class="form-group">
                    <label  class="col-sm-2 control-label">密码:</label>
                    <div class="col-sm-4">
                        <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码">
                    </div>
                    <div id="passwordTip"></div>
                </div>

                <div class="form-group">
                    <label  class="col-sm-2 control-label">确认密码:</label>
                    <div class="col-sm-4">
                        <input type="password" name="confirmPassword" class="form-control" id="confirmPassword" placeholder="请输入确认密码">
                    </div>
                    <div id="confirmPasswordTip"></div>
                </div>

                <div class="form-group">
                    <label  class="col-sm-2 control-label">昵称:</label>
                    <div class="col-sm-4">
                        <input type="text" name="nickName" class="form-control" id="nickName" placeholder="请输入昵称">
                    </div>
                    <div id="nickNameTip"></div>
                </div>

                <div class="form-group">
                    <label  class="col-sm-2 control-label">邮箱:</label>
                    <div class="col-sm-4">
                        <input type="text" name="mail" class="form-control" id="mail" placeholder="请输入邮箱" onblur="cheCkMail(this.value)">
                    </div>
                    <div id="mailTip"></div>
                </div>

                <div class="form-group">
                    <label  class="col-sm-2 control-label">手机号:</label>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <input type="text" name="phone" class="form-control" id="phone" placeholder="请输入手机号" onblur="cheCkPhone(this.value)">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" onclick="sendObj()" id="objButton">发送验证码</button>
                            </span>
                        </div>
                    </div>
                    <div id="phoneTip"></div>
                </div>


                <div class="form-group">
                    <label  class="col-sm-2 control-label">短信验证码:</label>
                    <div class="col-sm-4">
                        <input type="text" name="smsObj" class="form-control" id="smsObj" placeholder="请输入短信验证码">
                    </div>
                    <div id="smsObjTip"></div>
                </div>

                <div style="text-align: center;">
                    <button type="button" class="btn btn-primary" id="regButton" onclick="reg()" >注册</button>
                    <button type="reset" class="btn btn-default">重置</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../js/jquery-3.3.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../js/bootstrap/js/bootstrap.min.js"></script>

<script src="../js/common.js"></script>

</body>

<script>
    //全局变量

    let q_format_success="√";
    let q_error={};


    /**
     * 验证会员名是否存在
     * @param memberName
     */
    function cheCkMemberName(memberName){
        if(memberName==null||memberName==""){
            $("#memberNameTip").html("<span style='color: red'><b>请输入会员名</b></span>")
        }else {
            $.ajax({
                type:"get",
                data:{"memberName":memberName},
                url:server_url+"/member/cheCkMemberName",
                success:function (result){
                    if(result.code==200){
                        $("#memberNameTip").html("<span style='color: #00B83F'><b>"+q_format_success+"</b></span>")
                        // $("#regButton").remove("disabled")   移除禁用
                        delete q_error["memberName"];
                    }else if(result.code==5106){
                        $("#memberNameTip").html("<span style='color: red'><b>"+result.msg+"</b></span>")
                        // $("#regButton").attr("disabled","disabled"); //将按钮禁用
                        q_error["memberName"]=result.msg;
                    }
                    validate();
                }
            })
        }

    }

    /**
     * 验证邮箱是否存在
     * @param mail
     */
    function cheCkMail(mail){
        if(mail==null||mail==""){
            $("#mailTip").html("<span style='color: red'><b>请输入邮箱</b></span>")
        }else{
            $.ajax({
                type:"get",
                data:{"mail":mail},
                url:server_url+"/member/cheCkMail",
                success:function (result){
                    if(result.code==200){
                        $("#mailTip").html("<span style='color: #00B83F'><b>"+q_format_success+"</b></span>")
                        delete q_error["mail"];
                    }else if(result.code==5107){
                        $("#mailTip").html("<span style='color: red'><b>"+result.msg+"</b></span>")
                        q_error["mail"]=result.msg;
                    }
                    validate();
                }
            })
        }
    }

    /**
     * 验证手机号是否存在
     * @param phone
     */
    function cheCkPhone(phone){
        if(phone==""){
            $("#phoneTip").html("<span style='color: red'><b>请输入手机号</b></span>")
        }else{
            $.ajax({
                type:"get",
                data:{"phone":phone},
                url:server_url+"/member/cheCkPhone",
                success:function (result){
                    if(result.code==200){
                        $("#phoneTip").html("<span style='color: #00B83F'><b>"+q_format_success+"</b></span>")
                        delete q_error["phone"];
                    }else if(result.code==5108){
                        $("#phoneTip").html("<span style='color: red'><b>"+result.msg+"</b></span>")
                        q_error["phone"]=result.msg;
                    }
                    validate();
                }
            })
        }
    }

    /**
     *如果输入格式正确才会取消注册按钮禁用状态
     */
    function validate(){
        var v_res=[];
        for (var x in q_error) {
            v_res.push(q_error[x]);
        }
        if(v_res.length>0){
            $("#regButton").attr("disabled","disabled"); //将按钮禁用
            let v_html="";
            for(let r of v_res){
                v_html +="<li style='color: red'>"+r+"</li>"
            }
            $("#errorDiv").html(v_html);
        }else {
            $("#regButton").removeAttr("disabled");
            $("#errorDiv").html("");
        }

    }

    /**
     * 发送短信按钮倒计时
     */
    function count(){
        q_count_second--;
        if(q_count_second==0){
            $("#objButton").removeAttr("disabled","disabled");
            $("#objButton").html("发送验证码");
            q_count_second=60;
            return;
        }
        $("#objButton").html("倒计时"+q_count_second+"秒")
        setTimeout(function (){
            count();
        },1000)

    }

    let q_count_second=60;
    /**
     * 获取验证码
     */
    function sendObj(){
        alert("ajax被注释  可以手动在redis 设置验证码  Key为当前手机号")
       /* //如果已经注册了 那么将不再继续执行
        if(q_error["phone"]){
            return;
        }
        // 获取电话
        var phone = $("#phone").val().trim();
        if(phone.length==0){
            q_error["phone"]="<span style='color: red'><b>请输入手机号</b></span>";
            $("#phoneTip").html("<span style='color: red'><b>请输入手机号</b></span>");
            // $("#objButton").attr("disabled","disabled");
            return;
        }
        $("#objButton").attr("disabled","disabled");
        $("#objButton").html("倒计时6秒");
        count();
        $.post({
            data:{"phone":phone},
            url:server_url+"/sms/sendSms",
            success:function(rs){
                if(rs.status==200){
                    alert("注册成功，请登录！");
                }
            },
            error:function(){
                alert("发送请求异常");
            }
        })*/
    }

    /**
     * 注册
     */
    function reg(){
        var param = {};
        // 获取会员名
        param.memberName = $("#memberName").val().trim();
        // 获取密码
        param.password = $("#password").val().trim();
        // 获取确认密码
        param.confirmPassword = $("#confirmPassword").val().trim();
        // 获取昵称
        param.nickName = $("#nickName").val().trim();
        // 获取电话
        param.phone = $("#phone").val().trim();
        // 获取邮箱
        param.mail = $("#mail").val().trim();
        // 获取验证码
        param.obj = $("#smsObj").val().trim();

        console.log(param);
        $.post({
            data:param,
            url:server_url+"/member/addMember",
            success:function(result){
                if(result.code==200){
                    alert("注册成功，请登录！");
                     location.href = "login.html";
                }else if(result.code!=200){
                    alert(result.msg);
                }
            },
            error:function(){
                alert("发送请求失败");
            }
        })
    }



</script>

</html>
